<template>
    <div class="nav-container">
        <div class="nav">
            <span class="iconfont icon-art nav1"></span>
            <span class="nav-title">甲油胶</span>
        </div>
        <div class="nav">
            <span class="iconfont icon-a-camerashot nav2"></span>
            <span class="nav-title">潮流饰品</span>
        </div>
        <div class="nav">
            <span class="iconfont icon-clarity nav3"></span>
            <span class="nav-title">美甲工具</span>
        </div>
        <div class="nav">
            <span class="iconfont icon-effects nav4"></span>
            <span class="nav-title">美睫产品</span>
        </div>
        <div class="nav">
            <span class="iconfont icon-a-Closeupshot nav5"></span>
            <span class="nav-title">美甲灯</span>
        </div>
        <div class="nav">
            <span class="iconfont icon-Shadow nav6"></span>
            <span class="nav-title">笔系列</span>
        </div>
        <div class="nav">
            <span class="iconfont icon-Colors nav7"></span>
            <span class="nav-title">批发套装</span>
        </div>
        <div class="nav">
            <span class="iconfont icon-Scene nav8"></span>
            <span class="nav-title">全部分类</span>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue"

</script>
<style lang="less" scoped>
.nav-container {
    padding: 10px;
    overflow: hidden;
    clear: both;
    background-color: #fff;
    text-align: center;

    .nav {
        float: left;
        width: 25%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 10px;

        .iconfont {
            display: block;
            background-color: #f3f4f5;
            width: 50px;
            height: 50px;
            font-size: 35px;
            text-align: center;
            border-radius: 50%;
            line-height: 50px;
        }

        .nav-title {
            font-size: 14px;
            margin-top: 5px;
        }
    }

    .nav1 {
        color: #2a83fe;
    }

    .nav2 {
        color: #fd3761;
    }

    .nav3 {
        color: #2b91e2;
    }

    .nav4 {
        color: #2a83fe;
    }

    .nav5 {
        color: #00b478;
    }

    .nav6 {
        color: #fd6012;
    }

    .nav7 {
        color: #fe391f;
    }

    .nav8 {
        color: #00b478;
    }
}
</style>
